<template>
	<view class="clubBox">
		<u-status-bar></u-status-bar>
		<!-- <image class="bgimg" src="../../static/tabsIcon/card.jpg" mode="" style=""></image> -->
		<!-- <view class="top">
			<view class="searchBox">
				<u-search class="search" placeholder="搜索" prefixIcon="search" v-model="lessons.courseName" :show-action="true" actionText="搜索" :animation="true" @custom='search()'></u-search>
			</view>
			<image src="../../static/tabsIcon/kefu.png" mode="" style="width: 40rpx;height: 40rpx;" @click="customer()"></image>
		</view> -->
		<view class="newhead">
			<view class="bankname">
				<view class="banknameleft">距离{{bankname}}</view>
				<view class="banknameright" @click="billday()">
					<image style="width: 100%;height: 100%;" src="../../static/tabsIcon/more2.png" mode=""></image>
				</view>
			</view>
			<view class="banknum">
				<span class="daynumber" style="background-color: transparent;">{{day}}</span>
				<span style="background-color: transparent;">天</span>
			</view>
			<view class="bankadd" @click="newbank()">
				<image style="width: 100%;height: 100%;" src="../../static/tabsIcon/add.png" mode=""></image>
			</view>

		</view>
		<view class="center">
			<view class="centerleft" @click="cardglist()">
				<view class="centertext">卡神进阶</view>
			</view>
			<view class="centerright" @click="investigation()">
				<view class="centertext">征信数据</view>
			</view>
		</view>
		<view class="vip_box">
			<image src="../../static/tabsIcon/viplogo2.png" mode=""></image>
			<view class="ms">
				加入VIP有好礼
			</view>
			<view v-if="mine.isVip==1" @click="govip()" class="btn">
				立即续费
			</view>
			<view v-else @click="govip()" class="btn">
				立即开通
			</view>
		</view>
		<view class="bottomtext">
			<view
				style="width: 10upx;height: 40upx;background: linear-gradient(0deg,#E6534D 0%,#FF9999 100%);margin-right: 10upx;">
			</view>
			<view class="">
				精选课程
			</view>
		</view>
		<!-- <waterfallsFlow @imageClick="newlesson" v-if="leslists.length" :list="leslists">
			<template v-slot:default="{item , index}">
				<view>
					<view class="lessontext" style="background-color: transparent;">
						{{item.courseName}}
					</view>
					<view class="lessonpeople">
						<view class="textleft" style="background-color: transparent;">
							<image v-if="item.isVip == 0" src=../../static/tabsIcon/VIPfree2.png mode=""
								style="position: absolute;width: 120upx;height: 35rpx;left: 0;right: 0;margin: 0 auto;top: 15rpx;">
							</image>
						</view>
						<view class="textright" style="background-color: transparent;">
							<view class="leftimg">
								<image src="../../static/tabsIcon/look.png" mode="" style="width: 60upx;height: 60upx;">
								</image>
							</view>
							<view class="righttext" style="background-color: transparent;">{{item.numberOfViews}}</view>
						</view>
					</view>
				</view>
			</template>
		</waterfallsFlow> -->
		<!-- <view class="bottom"> -->
		<view class="lessons_list">
			<view class="lessons" v-for="(item,index) in leslists" @click="newlesson(item.id)">
				<image class="lessonimg" :src=item.coverLink mode="" style="" mode="widthFix"></image>
				<view class="lessontext" style="background-color: transparent;">
					{{item.courseName}}
				</view>
				<view class="lessonpeople">
					<view class="textleft" style="background-color: transparent;">
						<image v-if="item.isVip == 0" src=../../static/tabsIcon/VIPfree2.png mode=""
							style="position: absolute;width: 120upx;height: 35rpx;left: 0;right: 0;margin: 0 auto;top: 15rpx;">
						</image>
					</view>
					<view class="textright" style="background-color: transparent;">
						<view class="leftimg">
							<image src="../../static/tabsIcon/look.png" mode="" style="width: 60upx;height: 60upx;">
							</image>
						</view>
						<view class="righttext" style="background-color: transparent;">{{item.numberOfViews}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore @loadmore="addmodle" :status="status" />
		<!-- </view> -->
	</view>
</template>

<script>
	let timer = null
	import waterfallsFlow from "@/components/maramlee-waterfalls-flowTow/maramlee-waterfalls-flow.vue";
	import {
		clublist,
		selectcurrent,
	} from '@/api/club'
	import {
		getinfo,
		sign
	} from '@/api/mine'
	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				mine: [],
				LinkType: 'switchTab',
				lessons: {
					courseName: '',
					pageSize: 10,
					pageNum: 1
				},
				status: "loadmore",
				bankname: '',
				day: '',
				righttop: '../../static/tabsIcon/yongka.jpg',
				rightbottom: '../../static/tabsIcon/zhengxin.jpg',
				advlist1: [
					'../../static/tabsIcon/huiyuan.jpg',
				],
				leslists: [],
				over: false
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		onShow() {
			this.lessons.pageNum = 1;
			this.lessons.pageSize = 10;
			this.leslists = [];
			this.getMorelessons();
			this.selectcurrent();
			this.over = false
			this.status = 'loadmore'
			this.getinfo();
		},
		created() {
			// this.getMorelessons();
		},
		mounted() {

		},
		onLoad(data) {
			console.log(data)
		},
		onReachBottom() {
			//阻止重复加载
			// if (timer !== null) {
			// 	clearTimeout(timer)
			// }
			// this.lessons.pageNum++;
			// timer = setTimeout(() => this.getMorelessons(), 500)
			// // this.getMoreNews()
			this.addmodle();
		},
		methods: {
			addmodle() {
				if (this.over == true) {
					return;
				}
				if (this.status == "loadmore") {
					this.getMorelessons();
				}
			},
			search() {
				this.leslists = [];
				this.getMorelessons();
			},
			customer() {
				uni.navigateTo({
					url: '/pages/club/customer',
				});
			},
			getMorelessons() {
				this.status = "loading";
				clublist(this.lessons).then(res => {
					if (res.success == 1) {
						// for (let sss in res.data.records) {
						// 	this.leslists.push(res.data.records[sss])
						// }
						this.leslists = this.leslists.concat(res.data.records);
						if (res.data.records < 10) {
							this.over = true;
							setTimeout(() => {
								this.status = "nomore";
							}, 0);
						} else {
							this.lessons.pageNum++;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				}).finally(() => {
					this.status = "loadmore";
				});
			},
			selectcurrent() {
				selectcurrent().then(res => {
					if (res.success == 1) {
						this.bankname = res.data.bankName;
						this.day = res.data.expirationTime
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			billday() {
				uni.navigateTo({
					url: '/pages/club/billday',
				});
			},
			newlesson(id) {
				uni.navigateTo({
					url: '/pages/club/lesson?id=' + id,
				});
			},
			getinfo() {
				getinfo().then(res => {
						if (res.success == 1) {
							this.mine = res.data;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
			govip() {
				uni.navigateTo({
					url: '../mine/vip'
				})
			},
			newbank() {
				uni.navigateTo({
					url: '/pages/club/newbank',
				});
			},
			cardglist() {
				uni.navigateTo({
					url: './cardglist'
				})
			},

			investigation() {
				uni.navigateTo({
					url: './investigation'
				})
			}
		},

	}
</script>

<style>
	page {
		/* background-color: #6667AB; */
		background-color: #F4F4F4;
	}
</style>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	// page {
	// 	// background-color: #F4F4F4;
	// 	height: 120vh;
	// }

	.bgimg {
		position: fixed;
		float: inherit;
		z-index: -1;
		width: 100vw;
		height: 100vh;
		-webkit-filter: blur(10rpx);
		-moz-filter: blur(10rpx);
		-o-filter: blur(10rpx);
		-ms-filter: blur(10rpx);
		filter: blur(10rpx);
	}

	.top {
		width: 100%;
		display: flex;
		padding: 32upx 20upx;
		align-items: center;

		.searchBox {
			width: calc(100% - 54upx - 44upx);
			margin-right: 54upx;

			.search {
				// position: absolute;
				// left: 5%;
				// height: 60rpx;
				background-color: #FFFFFF;
				// overflow: hidden;
				border-radius: 100upx;
			}
		}

	}

	.vip_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin: 20rpx 0 30rpx;
		background: url(../../static/tabsIcon/mine/vipbg.png) no-repeat;
		background-size: 100% 100%;

		image {
			width: 44rpx;
			height: 38rpx;
		}

		.ms {
			color: #6A4714;
			font-size: 34rpx;
			font-weight: bold;
		}

		.btn {
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 24rpx;
			background: linear-gradient(270deg, #855716 10%, #4A2E04 100%);
			border-radius: 20rpx;
		}
	}

	.thred {
		position: relative;
		height: 300rpx;
		width: 100%;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		// background-color: #F56C6C;
	}

	.left {
		position: absolute;
		height: 280rpx;
		width: 47%;
		left: 0;
		left: 20rpx;
		border-radius: 40rpx;
		border: 10rpx solid #FFF;
		background-color: #fccf83;
	}

	.right {
		position: absolute;
		height: 300rpx;
		width: 45%;
		right: 0;
		right: 20rpx;
		// background-color:#1467FF;
	}

	.bankname {
		padding-top: 50rpx;
		margin: 0 20rpx;
		// height: 120rpx;
		font-size: 30upx;
		font-family: PingFang-SC-Regular;
		color: #FFFFFF;
		opacity: 1;
		background-color: transparent;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.banknameleft {
			width: 80%;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			// background-color: #18BC37;
		}

		.banknameright {
			// background-color: #0273F1;
			width: 60upx;
			height: 60upx;
		}
	}

	.banknum {
		position: relative;
		margin-top: 40upx;
		height: 100rpx;
		width: 100%;
		line-height: 80rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: transparent;
	}

	.bankadd {
		position: relative;
		width: 40upx;
		height: 40upx;
		float: right;
		margin-right: 50upx;
		// background-color: #18BC37;
	}

	.righttop {
		position: relative;
		width: 100%;
		height: 80rpx;
		margin-top: 20rpx;
		// margin: 0 auto;

		// background-color: #BEF5C8;
	}

	.rightbot {
		position: relative;
		width: 100%;
		height: 80rpx;
		margin-top: 60rpx;
		// margin: 0 auto;

		// background-color: #BEF5C8;
	}

	.img {
		width: 96%;
		height: 120rpx;
		border-radius: 40rpx;
		border: 8rpx solid #FFF;
	}

	.banners {
		position: relative;
		height: 240rpx;
		width: 100%;
		margin: 0 auto;
		// background-color: #5AC725;
	}

	.bottomtext {
		position: relative;
		width: 85%;
		left: 4%;
		margin: 10rpx 0;
		font-weight: 600;
		color: #FC6758;
		display: flex;
		align-items: center;
	}

	.bottom {
		position: relative;
		// height: ;

	}

	.lessons_list {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.lessons {
		// display: flex;
		// float: left;
		// flex-wrap: wrap;
		// justify-content: space-between;
		// align-content: flex-start;
		width: calc((100% - 20upx) / 2);
		// height: 270rpx;
		// margin: 2%;
		// height: 300rpx;
		background-color: #F4F4F4;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20upx;
	}

	.lessonimg {
		position: relative;
		// height: 170rpx;
		height: 300rpx;
		width: 100%;
	}

	.lessontext {
		position: relative;
		// height: 80rpx;
		width: 100%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 30upx;
		padding-left: 10upx;
		margin-top: 10upx;
	}

	.lessonpeople {
		position: relative;
		height: 65rpx;
		width: 100%;
		background-color: transparent;
	}

	.textleft {
		position: absolute;
		width: 40%;
		height: 65rpx;
		left: 0;
	}

	.textright {
		position: absolute;
		width: 60%;
		height: 65rpx;
		right: 0;
		text-align: center;
		font-size: 32rpx;
		line-height: 65rpx;
		display: flex;
		justify-content: flex-end;

		.leftimg {
			margin-right: 20upx;
		}

		.righttext {
			margin-right: 40upx;
		}
	}

	.daynumber {
		font-size: 80rpx;
		font-weight: 600;
		line-height: 90upx;
		height: 100upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		margin-right: 10upx;
	}

	.newhead {
		height: 340upx;
		width: 100%;
		margin: 0 auto;
		// background-color: #FF6A48;
		background-image: url("../../static/tabsIcon/club/clubbg.png");
		background-size: 100% 100%;
		// margin-top: 20upx;
		// border-radius: 20upx;
		overflow: hidden;
	}

	.center {
		width: 100%;
		margin: 40upx auto 20upx auto;
		height: 200upx;
		// background-color: #18BC37;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.centerleft {
			height: 160upx;
			width: 370upx;
			background-image: url("../../static/tabsIcon/club/clubleft.png");
			background-size: 100% 100%;
			margin-right: 10upx;
		}

		.centerright {
			height: 160upx;
			width: 370upx;
			background-image: url("../../static/tabsIcon/club/clubright.png");
			background-size: 100% 100%;
			margin-left: 10upx;
		}
	}

	.centertext {
		margin-top: 20upx;
		margin-left: 20upx;
		color: #FFFFFF;
		font-size: 30upx;
	}

	.clubBox {
		padding: 20upx;
	}
</style>
